<template>
  <main>
    <div class="menu-list">
      <div
        class="menu-item"
        v-for="item in menuList"
        :key="item.name"
        @click="$router.push(item.path)"
      >
        <img :src="item.icon" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="view">
      <RouterView />
    </div>
  </main>
</template>
<script setup>
import { ref } from "vue";
import commentIcon from "@/assets/m-c.png";
import chatIcon from "@/assets/m-m.png";
import likeIcon from "@/assets/m-like.png";
import priceIcon from "@/assets/price.png";
const menuList = [
  {
    name: "评论",
    path: "/notice/comment",
    icon: commentIcon,
  },
  {
    name: "私信",
    path: "/notice/message",
    icon: chatIcon,
  },
  {
    name: "赞",
    path: "/notice/like",
    icon: likeIcon,
  },
  // {
  //   name: "付费",
  //   path: "/notice/price",
  //   icon: priceIcon,
  // },
];
</script>

<style scoped lang="less">
main {
  width: 70%;
  margin: 20px auto;
  background-color: #fff;
  padding: 30px;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  .menu-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 200px;
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    &:hover {
      background-color: #f5f5f5;
    }
    img {
      width: 30px;
      height: 30px;
      margin-right: 20px;
    }
  }
  .view {
    flex: 1;
  }
}
</style>
